import React, { PureComponent } from 'react'
import PropTypes from 'prop-types'
import { Button, Toast } from 'antd-mobile'
import css from './index.module.scss'
import CommentItem from './item'
import CommentReply from './reply'
import Avatar from '@/assets/images/default-avatar.png'
export default class Comment extends PureComponent {
    replyRef = React.createRef()

    static propTypes = {
        comments: PropTypes.array,
        enableComment: PropTypes.bool,
        totalNum: PropTypes.number
    }

    static defaultProps = {
        comments: [],
        enableComment: true,
        totalNum: 0
    }

    state = {
        currentComment: null
    }

    handelCommentSelect = comment => {
        this.setState({
            currentComment: comment
        }, () => {
            this.replyRef.current && this.replyRef.current.show()
        })
    }

    handlePost = () => {
        Toast.info('功能开发中', 3)
    }

    render() {
        const { comments, totalNum, enableComment, className } = this.props
        const { currentComment } = this.state
        return (
            <div className={`${css['wrap']} ${className ? className : ''}`}>
                { totalNum > 0 && <div className="title">评论<span className="count">（{totalNum}）</span></div>}
                { enableComment && (
                    <div className="box">
                        <img src={Avatar} className="avatar" alt="头像" />
                        <input type="text" className="input" placeholder="说点什么吧" />
                        <Button type="primary" size="small" onClick={this.handlePost}>发表</Button>               
                    </div>
                ) }

                {
                    comments.map(item => {
                        return (
                            <CommentItem key={item.rpid} comment={item} onSelect={this.handelCommentSelect} />
                        )
                    })
                }
                { currentComment && <CommentReply ref={this.replyRef} className={css['popup']} comment={currentComment} />}
            </div>
        )
    }
}
